<template>
  <div class="cs-page-container">
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          align="center"
          label="鉴黄时间段"
          width="160"
        >
          <template slot-scope="{row}">{{ timeScope[row.timeSegment] }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="鉴黄比例"
          prop="value"
          width="120"
        >
          <template slot-scope="{row}">{{ row.value + "%" }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="140"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="showDialog(row.timeSegment)"
            >修改</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-dialog
        v-loading="dialogLoading"
        title="鉴黄配置"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <div class="dialog-box">
          <el-input
            v-model="updateOb.value"
            clearable
            placeholder="请输入鉴黄比例，如：60"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateLevel()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { xhrPornIdentifyUpdate, xhrPornIdentifyList } from '@/api/customSetting'

export default {
  name: 'PornIdentifySetting',
  data() {
    return {
      list: null,
      // level: null,
      dialogLoading: true,
      dialogVisible: false,
      // timeSegment: null,
      listLoading: true,
      updateOb: {
        timeSegment: null,
        value: null
      },
      timeScope: [
        '00:00--01:00',
        '01:00--02:00',
        '02:00--03:00',
        '03:00--04:00',
        '04:00--05:00',
        '05:00--06:00',
        '06:00--07:00',
        '07:00--08:00',
        '08:00--09:00',
        '09:00--10:00',
        '10:00--11:00',
        '11:00--12:00',
        '12:00--13:00',
        '13:00--14:00',
        '14:00--15:00',
        '15:00--16:00',
        '16:00--17:00',
        '17:00--18:00',
        '18:00--19:00',
        '19:00--20:00',
        '20:00--21:00',
        '21:00--22:00',
        '22:00--23:00',
        '23:00--24:00'
      ]
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      xhrPornIdentifyList()
        .then(resp => {
          this.list = resp.data
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    showDialog(timeSegment) {
      this.updateOb.timeSegment = timeSegment
      this.dialogVisible = true
      this.dialogLoading = false
    },
    resetUpdateOb() {
      this.updateOb = {
        timeSegment: null,
        value: null
      }
    },
    updateLevel() {
      this.dialogLoading = true
      if (this.updateOb.value && !/^\d*$/.test(this.updateOb.value)) {
        this.$message.warning('配置只能是整数')
        this.listLoading = false
        this.dialogLoading = false
        this.updateOb.value = null
        return
      }
      if (!(this.updateOb.value)) {
        this.$message.warning('配置不能为空')
        this.listLoading = false
        // this.dialogVisible = false
        this.dialogLoading = false
        this.updateOb.value = null
        return
      }
      // if (!/^((?!0)\d{1,2}|100)$/.test(this.updateOb.value)) {
      if (this.updateOb.value < 0 || this.updateOb.value > 100) {
        this.$message.warning('配置范围只能在[0-100]')
        this.listLoading = false
        this.dialogLoading = false
        this.updateOb.value = null
        return
      }
      xhrPornIdentifyUpdate(this.updateOb)
        .then(resp => {
          this.dialogVisible = false
          this.dialogLoading = false
          this.resetUpdateOb()
          this.showResult()
        })
        .catch(err => {
          this.$message.error(err)
          // this.listLoading = false
          this.dialogLoading = false
          this.resetUpdateOb()
        })
    },
    showResult() {
      this.doSearch()
      this.$message.success('操作成功!')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
>span{
    width: 30%;
    margin: 10px 0;
  >span{
      font-weight: 700;
    }
  }
}
</style>
